<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>

    <div class="panel-group1">
      <div class="column_c ">

        <div class="title ">常见问题</div>

        <div>
          <el-input class="ssk" v-model="queryParams.keyword" placeholder="请输入关键词进行搜索" @input="handleEnter">
            <template slot="prefix">
              <i class="el-icon-search" style="font-size: 20px;"></i>
            </template>
          </el-input>
        </div>

      </div>
    </div>

    <div class="panel-group2">


      <el-row :gutter="20" style="padding: 50px;">

        <el-col :span="5">
          <div class="lef">
            <div v-for="(item, index) in List" :key="index" :class="{ timez: item.active }" class="timek cursor row_a_c" @click="toggleStyle(item,index)">
              <div style="width: 20px;">
                <div v-if="item.active" class="xdd"></div>
              </div>
              <div>{{item.title}}</div>
            </div>
          </div>
        </el-col>



        <el-col :span="19">
          <div class="scroll-container rigt">
            <div>
              <div>
                <!-- <div>111</div> -->
                <div v-html="coent"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>






  </div>
</template>

<script>
  import Navvz from '@/components/Navvz';

  import * as UpdateLog from '@/api/system/update_log';
  import * as CommonProblem from '@/api/system/common_problem';


  export default {
    name: 'Index',
    components: {
      Navvz,
    },
    data() {
      return {
        downData: [], //下载数据
        container: null,
        List: [],
        coent: '',
        loading: false,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
          keyword: null,
        },

      };
    },
    filters: {
      truncate(value) {
        if (value.length > 10) {
          return '...' + value.slice(-10);
        } else {
          return value;
        }
      }
    },
    created() {
      this.getList();

    },
    mounted() {


    },
    methods: {
      handleEnter() {
        this.getList();
      },
      toggleStyle(item, index) {
        this.List.forEach(i => {
          i.active = false; // 将所有元素的 active 属性设为 false
        });
        item.active = true; // 将点击的元素的 active 属性设为 true
        this.coent = item.content;

      },

      getList() {
        this.loading = true;
        CommonProblem.getList(this.queryParams).then(response => {
          if (response.data.rows) {
            this.coent = response.data.rows[0].content;
            this.List = response.data.rows.map((item, index) => {
              return {
                ...item,
                active: index === 0 ? true : false // 设置第一个元素的 active 属性为 true，其他元素的 active 属性为 false
              };
            });
          }
          this.loading = false;
        });
      },



    }
  };
</script>

<style lang="scss" scoped>
  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    height: 180px;
    background: #3FC1C9;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .panel-group2 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 1100px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .scroll-container {
    background-color: #F9F9F9;
    height: 900px;
    /* 设置容器的固定高度 */
    overflow-y: auto;
    /* 添加垂直滚动条 */
  }

  .title {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
  }

  .ssk {
    width: 800px;
    margin-top: 30px;

  }


  .xdd {
    margin-right: 10px;
    width: 10px;
    height: 10px;
    background: #3FC1C9;
    border-radius: 50%;
  }

  .xiana {
    width: 100%;
    height: 1px;
    background: #E7E7E7;
    margin-top: 50px;
  }

  .xianb {
    width: 1px;
    height: 800px;
    background: #E7E7E7;
  }

  .timez {

    color: #3FC1C9 !important;
    // color: #10868d !important;

  }


  .lef {
    // background: darkred;
    padding: 0px;

  }

  .timezf {
    color: red;
    // color: #1890ff !important;

  }

  .timek {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #000000;
    padding: 15px;
    // margin-bottom: 20px;
    border: 1px solid #979797;
  }


  .rigt {
    padding: 50px;
  }


  .rigtt {
    padding: 50px;
    border: 1px solid #3FC1C9;
    border-radius: 6px;
  }

  .xztp {
    width: 18px;
    height: 17px;
  }

  .bu {
    width: 155px;
    height: 45px;
  }

  .container {
    position: relative;
    display: inline-block;
    margin-top: 13px;

  }

  .text {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: center;
  }

  .xixi {
    width: 1px;
    height: 160px;
    background: #979797;
  }



  .ellipsis {
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // width: 120px;


    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 120px;

  }

  ::v-deep .el-input--medium .el-input__inner {
    height: 40px;
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
  }


  ::v-deep .el-input__prefix {

    left: 15px;
    top: 9px;

  }
</style>
